<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习操作视频</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
     <div style="text-align: center;">
         <button class="btn btn-primary" onclick="playPause()">播放/停止</button>
         <button class="btn btn-success btn-lg" onclick="makeBig()">大</button>
         <button class="btn btn-success btn-sm" onclick="makeNormal()">中</button>
         <button class="btn btn-success btn-xs" onclick="makeSmall()">小</button><br/>
         <video id="video1" width="420" style="margin-top: 15px;">
             <source src="object/001.mp4" type="video/mp4">
             Your browser does not support HTML5 vido.
         </video>
     </div>

<script type="text/javascript">
    var myVideo=document.getElementById("video1");
    //播放、停止
    function  playPause() {
        if(myVideo.paused){
            myVideo.play();
        }else{
            myVideo.pause();
        }
    }

    //放大
    function makeBig() {
        myVideo.width=600;
    }

    //缩小
    function makeSmall() {
        myVideo.width=320;
    }

    //中等
    function makeNormal() {
        myVideo.width=420;
    }
</script>
</body>
</html>